<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 自定义属性 -->
    <!-- <div data-id="" data-index data-msg=""></div> -->

    <div id="app">
        <!-- {{}} 文本插值->本质上属于拼接(替换)  {{xxx}}中的内容会被替换为 data中对应属性名的值 -->
        <p>{{msg}}</p>

        <!-- html属性的值 作为{{}}中的文本拼接 -->
        <!-- <p>{{html}}</p> -->

        <!-- p.innerHTML ='<b>hello Vue</b>'-->
        <p v-html="html">{{msg}}</p>
        <p v-html="'html'">{{msg}}</p>
        <!-- p.innerHTML ='hello Vue'-->
        <p v-html="msg">1111111</p>
        <hr>
        <!-- p.innerText = "hello world" -->
        <p v-text="msg"></p>
        <!-- p.innerText ='<b>hello Vue</b>'    -->
        <p v-text="html"></p>

        <hr>
        <!-- {{}} 生效了  {{msg}} => 被替换为 hello world -->
        <p>{{msg}}</p>
        <!-- 但是并是不所有时候都期望{{}}生效被解析, 所以此时可以禁用{{}}语法 -> 禁用后 {{}}会作为普通文本渲染  -->
        <p v-pre>{{这是一段文本}}</p>


    </div>
</body>
<script>
    // 指令: (vue在标签对设置的自定义属性 属性名(指令名称)统一 v-xxx)
    // 指令 (Directives) 是带有 v- 前缀的特殊属性(attribute),指令属性( attribute)的值预期是单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM


    // 注意: 指令属性( attribute)的值预期是单个 JavaScript 表达式  => 将表达式的执行结果作为指令的最终结果

    
    // 指令的用法格式1: 
    // v-指令名称="指令值"

    // v-html: 根据指令的值设置元素的html结构(html结构包含标签和文本  -> v-html也可以只设置文本)
    // v-text: 根据指令的值设置元素的文本结构(文本   如果设置html结构会原样输出)
    // v-pre:  禁用文本插值{{xxx}},此时文本插值会不在生效,作为原样输出 {{ }} 



    var vm = new Vue({
        el:"#app",
        data:{
            msg:"hello world",
            html:"<b>hello Vue</b>",
        },
    })







    
</script>
</html>